<template>
	<view class="u-flex item" :class="vertical?'u-flex-col':''">
		<u-image :width="size" :height="size" :src="item.url" @click="goPage"></u-image>
		<view class="u-flex-1 u-p-l-20">
			<view class="name u-line-1" @click="goPage">
				{{item.name}}
			</view>
			<view class="u-flex" @click="goPage">
				<view class="label">{{item.label}}</view>
				<view class="delivery">{{item.delivery}}</view>
			</view>
			<view class="u-flex" @click="goPage">
				<prices-style :prices="item.originalPrice" textColor='#acacac' through></prices-style>
			</view>
			<view class="u-flex u-row-between number-box">
				<view class="u-flex">
					<prices-style :prices="item.prices"></prices-style> /{{item.unit}}
				</view>
				<u-number-box v-model="item.num" :min="1" @change="valChange"></u-number-box>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		computed: {
			size() {
				return this.imageSize + 'rpx'
			}
		},
		props: {
			index:{
				type: Number,
				default: 0
			},
			idx:{
				type: Number,
				default: 0
			},
			item: {
				type: Object,
				default: () => {
					return {}
				}
			},
			vertical: {
				type: Boolean,
				default: false
			},
			imageSize: {
				type: [Number, String],
				default: '160'
			}
		},
		mounted() {

		},
		data() {
			return {};
		},
		methods: {
			valChange(e) {
				this.$emit('changeNum',e.value,this.index,this.idx)
			},
			goPage() {
				uni.navigateTo({
					url: '/pages/goods-detail/goods-detail?id=' + this.item.id
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.item {
		background-color: #FFFFFF;
		border-radius: 10rpx;
		width: 100%;

		.u-flex-1 {
			width: 100%;
		}

		.name {
			font-weight: 600;
			width: 100%;
		}

		.label,
		.delivery {
			color: #ce5f4d;
			font-size: 24rpx;
			border: 1rpx solid #ce5f4d;
			padding: 0 5rpx;
			border-radius: 4rpx;
			transform: scale(0.8);
		}

		.delivery {
			color: #d9b89d;
			border: 1rpx solid #d9b89d;
		}

		.sold {
			color: #a3a6a3;
			font-size: 24rpx;
		}
	}
</style>
